<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div id="main" style="margin: 10px; width: 1200px; height: 700px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getMigrationData } from "@/api/system/migration";

export default {
  name: "EchartsComponent",
  data() {
    return {
      geoCoordMap: {
        北京: [116, 40],
        巴黎: [2, 49],
        莫斯科: [38, 56],
        伦敦: [0, 52],
        华盛顿特区: [-77, 39],
        贝尔格莱德: [20, 45],
        布宜诺斯艾利斯: [-58, -35],
        明斯克: [28, 54],
        巴西利亚: [-48, -16],
        圣地亚哥: [-71, -33],
        哈瓦那: [-82, 23],
        布拉格: [14, 50],
        哥本哈根: [13, 56],
        圣多明各: [-70, 18],
        开罗: [31, 30],
        圣萨尔瓦多: [-89, 14],
        太子港: [-72, 19],
        德黑兰: [51, 36],
        贝鲁特: [35, 34],
        卢森堡: [6, 50],
        惠灵顿: [175, -41],
        马那瓜: [-86, 12],
        亚松森: [-58, -25],
        马尼拉: [121, 15],
        华沙: [21, 52],
        利雅得: [47, 25],
        大马士革: [36, 33],
        安卡拉: [33, 40],
        基辅: [31, 50],
        雅典: [24, 38],
        德里: [77, 29],
        利马: [-77, -12],
        堪培拉: [149, -35],
        圣何塞: [-84, 10],
        蒙罗维亚: [-11, 6],
        波哥大: [-74, 5],
        墨西哥城: [-99, 19],
        比勒陀利亚: [28, -26],
        渥太华: [-76, 45],
        亚的斯亚贝巴: [39, 9],
        巴拿马城: [-80, 9],
        拉巴斯: [-68, -16],
        加拉加斯: [-67, 10],
        危地马拉城: [-91, 15],
        奥斯陆: [11, 60],
        阿姆斯特丹: [5, 52],
        特古西加尔巴: [-87, 14],
        蒙得维的亚: [-56, -35],
        基多: [-79, 0],
        巴格达: [44, 33],
        布鲁塞尔: [4, 51],
        喀布尔: [69, 35],
        雷克雅未克: [-22, 64],
        斯德哥尔摩: [18, 59],
        曼谷: [101, 14],
        伊斯兰堡: [73, 34],
        萨那: [44, 15],
        仰光: [96, 17],
        耶路撒冷: [35, 32],
        雅加达: [107, -6],
        地拉那: [20, 41],
        维也纳: [16, 48],
        索非亚: [23, 43],
        金边: [105, 12],
        赫尔辛基: [25, 60],
        布达佩斯: [19, 47],
        都柏林: [-6, 53],
        罗马: [12, 42],
        拉巴特: [36, 32],
        万象: [103, 18],
        的黎波里: [13, 33],
        加德满都: [85, 28],
        里斯本: [-9, 39],
        布加勒斯特: [26, 44],
        马德里: [-4, 40],
        科伦坡: [80, 7],
        拉巴特: [-7, 34],
        喀土穆: [33, 16],
        突尼斯: [10, 37],
        东京: [140, 36],
        阿克拉: [0, 6],
        吉隆坡: [102, 3],
        科纳克里: [-14, 10],
        波多诺伏: [3, 6],
        瓦加杜古: [-2, 12],
        雅温得: [12, 4],
        班吉: [19, 4],
        恩贾梅纳: [15, 12],
        布拉柴维尔: [15, -4],
        亚穆苏克罗: [-5, 7],
        尼科西亚: [33, 35],
        金沙萨: [15, -4],
        利伯维尔: [9, 0],
        塔那那利佛: [48, -19],
        尼亚美: [2, 14],
        摩加迪沙: [45, 2],
        洛美: [1, 6],
        巴马科: [-8, 13],
        达喀尔: [-17, 15],
        拉各斯: [3, 6],
        弗里敦: [-13, 8],
        努瓦克肖特: [-16, 18],
        乌兰巴托: [107, 48],
        达累斯萨拉姆: [39, -7],
        布琼布拉: [29, -3],
        金斯敦: [-77, 18],
        基加利: [30, -2],
        西班牙港: [-61, 11],
        阿尔及尔: [3, 37],
        坎帕拉: [33, 0],
        科威特: [48, 29],
        内罗毕: [37, -1],
        桑给巴尔市: [39, 0],
        多多马: [36, -6],
        利隆圭: [34, -14],
        瓦莱塔: [15, 36],
        卢萨卡: [28, -15],
        班珠尔: [-17, 13],
        马累: [74, 4],
        新加坡: [104, 1],
        乔治敦: [-58, 7],
        哈博罗内: [26, -25],
        马塞卢: [27, -29],
        布里奇敦: [-60, 13],
        亚丁: [45, 13],
        路易港: [57, -20],
        姆巴巴内: [31, -26],
        马拉博: [9, 4],
        苏瓦: [178, -18],
        麦纳麦: [51, 26],
        廷布: [90, 27],
        多哈: [52, 25],
        马斯喀特: [59, 24],
        阿布扎比: [54, 24],
        拿骚: [-77, 25],
        波恩: [7, 51],
        柏林: [13, 52],
        达卡: [90, 24],
        圣乔治: [-62, 12],
        比绍: [-16, 12],
        普拉亚: [-24, 15],
        马普托: [33, -26],
        圣多美: [7, 0],
        莫尔斯比港: [147, -9],
        莫罗尼: [43, -12],
        帕拉马里博: [-55, 6],
        维多利亚: [55, -5],
        罗安达: [13, -9],
        阿皮亚: [-172, -14],
        吉布提: [43, 12],
        河内: [106, 21],
        霍尼亚拉: [160, -9],
        罗索: [-61, 15],
        卡斯特里: [-61, 14],
        哈拉雷: [31, -18],
        金斯敦: [-61, 13],
        维拉港: [168, -18],
        贝尔莫潘: [-89, 17],
        圣约翰: [-62, 17],
        巴斯特尔: [-63, 17],
        斯里巴加湾市: [115, 5],
        温得和克: [17, -23],
        瓦杜兹: [10, 47],
        平壤: [126, 39],
        塔林: [25, 59],
        里加: [24, 57],
        维尔纽斯: [25, 55],
        马朱罗: [171, 7],
        帕利基尔: [158, 7],
        首尔: [127, 38],
        埃里温: [45, 40],
        巴库: [50, 40],
        阿斯塔纳: [71, 51],
        比什凯克: [75, 43],
        基希讷乌: [29, 47],
        圣马力诺: [12, 44],
        杜尚别: [69, 39],
        阿什哈巴德: [58, 38],
        塔什干: [69, 41],
        萨拉热窝: [18, 44],
        萨格勒布: [16, 46],
        卢布尔雅那: [15, 46],
        第比利斯: [45, 42],
        布拉迪斯拉发: [17, 48],
        斯科普里: [21, 42],
        阿斯马拉: [39, 15],
        摩纳哥: [7, 44],
        安道尔城: [2, 43],
        科罗尔: [134, 7],
        南塔拉瓦: [173, 1],
        雅伦: [167, 1],
        努库阿洛法: [-175, -21],
        富纳富提: [179, 8],
        伯尔尼: [7, 47],
        帝力: [126, -9],
        波德戈里察: [19, 42],
        朱巴: [32, 5],
      },
      migrationData: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getMigrationData();
    });
  },
  methods: {
    convertData(data) {
      return data
        .map((item) => {
          var fromCoord = this.geoCoordMap[item[0].name];
          var toCoord = this.geoCoordMap[item[1].name];
          return fromCoord && toCoord
            ? [{ coord: fromCoord }, { coord: toCoord }]
            : null;
        })
        .filter((item) => item !== null);
    },
    loadWorldMap(callback) {
      fetch("https://cdn.jsdelivr.net/npm/echarts@4.2.1/map/json/world.json")
        .then((response) => response.json())
        .then((mapData) => {
          echarts.registerMap("world", mapData);
          callback();
        })
        .catch((error) => {
          console.error("Failed to load world map:", error);
        });
    },
    initChart() {
      // 颜色数组
      var color = ["#3ed4ff", "#ffa022", "#a6c84c"];

      // 创建系列
      var series = [];
      Object.keys(this.migrationData).forEach((city, i) => {
        series.push(
          {
            name: city + " 飞行线",
            type: "lines",
            zlevel: 1,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: "#fff",
              symbolSize: 3,
            },
            lineStyle: {
              color: color[i % color.length],
              width: 0,
              curveness: 0.2,
            },
            data: this.convertData(this.migrationData[city]),
          },
          {
            name: city + " 飞行线路",
            type: "lines",
            zlevel: 2,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol:
                "path://M16,0.384V1.216L6.144,11.36L6.432,11.648L16,1.744V8.576L25.568,1.744V1.216L16,0.384Z",
              symbolSize: 15,
            },
            lineStyle: {
              color: color[i % color.length],
              width: 1,
              opacity: 0.8,
              curveness: 0.2,
            },
            data: this.convertData(this.migrationData[city]),
          },
          {
            name: city + " 系列",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              show: true,
              position: "right",
              formatter: "{b}",
            },
            symbolSize: (val) => val[2] / 8,
            itemStyle: {
              color: color[i % color.length],
            },
            data: this.migrationData[city].map((dataItem) => ({
              name: dataItem[1].name,
              value: this.geoCoordMap[dataItem[1].name].concat([
                dataItem[1].value,
              ]),
            })),
          },
          {
            name: city + " 系列",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              show: true,
              position: "right",
              formatter: "{b}",
            },
            symbolSize: (val) => val[2] / 8,
            itemStyle: {
              color: color[i % color.length],
            },
            data: this.migrationData[city].map((dataItem) => ({
              name: dataItem[0].name,
              value: this.geoCoordMap[dataItem[0].name].concat([
                dataItem[0].value,
              ]),
            })),
          }
        );
      });

      // 初始化图表
      var chart = echarts.init(document.getElementById("main"));

      // 配置项
      var option = {
        backgroundColor: "#080a20",
        title: {
          text: "跨境电商物流图",
          // subtext: "数据纯属虚构",
          left: "left",
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: "world",
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#132937",
              borderColor: "#0692a4",
            },
            emphasis: {
              areaColor: "#0b1c2d",
            },
          },
        },
        series: series,
        tooltip: {
          trigger: "item",
        },
      };

      // 设置图表选项
      chart.setOption(option);

      // 错误处理
      chart.on("error", function (event) {
        console.error("ECharts error:", event);
      });

      // 响应式设计
      window.addEventListener("resize", () => {
        chart.resize();
      });
    },
    getMigrationData() {
      getMigrationData()
        .then((res) => {
          if (res.code === 200) {
            console.log("Received migration data:", res.data);
            this.migrationData = res.data;
            this.loadWorldMap(() => {
              this.initChart();
            });
          } else {
            console.error("Failed to get migration data:", res.message);
          }
        })
        .catch((error) => {
          console.error("Error fetching migration data:", error);
        });
    },
  },
};
</script>

<style scoped>
/* 添加一些样式以提高可读性和美观性 */
#main {
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
